<template>
  <div class="public-welfare home">
    <div class="top">
      <p class="top-title">凝聚 <span>8,456,512</span> 份爱心</p>
      <swiper :options="bannerHome">
        <swiper-slide class="swiper-demo-img" v-for="(item, index) in 5" :key="index"><img src="@/assets/zhihuibao01.png"></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="flex">
        <p class="left" @click="router({path: './myWelfare'})">
          <img src="@/assets/gongyi02.png" alt="">
          <span>捐赠项目</span>
        </p>
        <p class="right" @click="router({path: './welfareList'})">
          <img src="@/assets/beibu.png" alt="">
          <span>我的捐赠</span>
        </p>
      </div>
    </div>    
    <div class="section">
      <div class="section-top clear">
        <span class="title">公益项目</span>
        <span class="tip">伸仁爱之手</span>
        <span class="more" @click="router({path: './welfareProList'})">查看更多 <img class="arrow" src="@/assets/fanhui01.png" alt=""></span>
      </div>
      <div class="list">
        <div class="item" @click="router({path: './welfarePro'})">
          <img src="@/assets/gongyi04.png" alt="">
          <p class="title">关爱留守儿童计划 看见成长的力量</p>
          <div class="cons">
            <div class="item-con">
              <p class="num">2642578.33</p>
              <p class="text">用户捐款(元)</p>
            </div>
            <div class="item-con">
              <p class="num">86459</p>
              <p class="text">爱心(份)</p>
            </div>
            <div class="item-con">
              <p class="num">123</p>
              <p class="text">项目天数</p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/gongyi04.png" alt="">
          <p class="title">关爱留守儿童计划 看见成长的力量</p>
          <div class="cons">
            <div class="item-con">
              <p class="num">2642578.33</p>
              <p class="text">用户捐款(元)</p>
            </div>
            <div class="item-con">
              <p class="num">86459</p>
              <p class="text">爱心(份)</p>
            </div>
            <div class="item-con">
              <p class="num">123</p>
              <p class="text">项目天数</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section border-none">
      <div class="section-top clear">
        <span class="title">公益新闻</span>
        <span class="tip">慈善暖人心</span>
        <span class="more" @click="router({path:'./welfareNewsList'})">查看更多 <img class="arrow" src="@/assets/fanhui01.png" alt=""></span>
      </div>
      <news-list></news-list>
    </div>
    <div class="section border-none">
      <div class="section-top clear">
        <span class="title">公益公示</span>
        <span class="tip">共建慈善事业</span>
      </div>
      <div class="notice">
        <div class="item" @click="router({path: './welfareNotice'})">
          <img src="@/assets/gongyi07.png" alt="">
          <p class="notice-title">十月份公益项目活动公示</p>
          <p class="time">2018.11.16</p>
        </div>
        <div class="item">
          <img src="@/assets/gongyi07.png" alt="">
          <p class="notice-title">十月份公益项目活动公示</p>
          <p class="time">2018.11.16</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import newsList from '@/components/newsList'
import 'swiper/dist/css/swiper.css'

  export default {
    components: {
      swiper,
      swiperSlide,
      newsList
    },
    data () {
      return {
        bannerHome: {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.public-welfare
  background-color #f5f5f5
  min-height 100vh
  padding-bottom 5rem
  .top
    background-color #fff
    margin-bottom 1rem
    .top-title
      line-height 5rem
      height 5rem
      text-align center
      font-size 1.3rem
      color #666
      span
        font-size 2rem
        color #172F6D
        font-weight bold    
    .swiper-demo-img
      padding 1rem 1.5rem
      box-sizing border-box
    .swiper-ad-img
      padding 0
    .flex
      display flex
      height 4.5rem
      line-height 4.5rem
      text-align center
      p
        flex 1
        font-size 1.5rem
        color #333
        span
          display inline-block
          vertical-align middle
        img
          display inline-block
          vertical-align middle
          width 1.8rem
          margin-right .5rem
      .right
        position relative
        &::after
          content ''
          position absolute
          left 0
          height 60%
          top 20%
          width 1px
          background-color #e6e6e6
  .section
    background-color #fff
    padding 0 1.5rem
    border-bottom 1px solid #E6E6E6
    .section-top
      padding-top 3rem
      padding-bottom 2rem
      .title
        color #333
        font-size 1.8rem
        line-height 1.8rem
        font-weight bold
      .tip
        font-size 1.3rem
        color #999
        margin-left 1rem
        line-height 1.3rem
      .more
        color #999
        font-size 1.3rem
        line-height 1.3rem
        float right
        position relative
        padding-right 1rem
        .arrow
          width .4rem
          position absolute
          right 0
          top .3rem
    .news
      padding 0
    .item
      margin-bottom 3rem
      img
        width 100%
      .title
        line-height 5rem
        height 5rem
        font-size 1.7rem
        color #333
        font-weight 800
      .cons
        background-color #FAFAFA
        display flex
        border-bottom .2rem solid #172F6D
        padding 1.8rem 0
        border-radius: .6rem .6rem 0px 0px;
        .item-con
          flex 1
          text-align center
          .text
            font-size 1.2rem
            color #999
            line-height 1.2rem
            height 1.2rem
          .num
            font-size 1.7rem
            color #000
            font-weight bold
            line-height 1.7rem
            height 1.7rem
            margin-bottom 1rem
    .notice
      .item
        &:last-child
          padding-bottom 3rem
          margin-bottom 0
        .notice-title
          color #333
          font-size 1.7rem
          height 1.7rem
          line-height 1.7rem
          font-weight 800
          margin-top 2rem
        .time
          color #999
          font-size 1.2rem
          line-height 1.8rem
          margin-top .6rem
  .border-none
    border none
</style>
